import React, {useState} from 'react'
import IconFont from '../IconFont/IconFont'
import User from '../User/User'
import Login from '../Login/Login'
import { getUser, removeUser } from '../../utils/storage'
import './Header.scss'

export default function Header() {

  const [showLogin, setShowLogin] = useState(false)

  // const [user] = useState(localStorage.getItem('user') || {})

  const openLogin = () => {
    setShowLogin(true)
  }

  const closeLogin = () => {
    setShowLogin(false)
  }

  const logout = () => {
    removeUser('user')
    window.location.href = ''
  }

  return (
    <div style={{position: 'relative', zIndex: 10}}>
      <div className='top-bar'>
        <div style={{display: 'flex', alignItems: 'center'}}>
          <IconFont type='icon-laba' style={{fontSize: '20px'}}></IconFont>
          <span>欢迎来访~</span>
        </div>
        <div className='user-action' style={{display: 'flex', alignItems: 'center'}}>
          {
            getUser()?._id ? (
              <>
                <User className='primary-hover' style={{cursor: 'pointer'}} avatarSize='25px' nickname={getUser().nickname} avatar={getUser().avatar}></User>
                <span style={{margin: '0 10px'}}>|</span>
                <span className='primary-hover' style={{cursor: 'pointer'}} onClick={logout}>退出</span>
              </>
            )
            : <span className='primary-hover' style={{cursor: 'pointer'}} onClick={openLogin}>登录</span>
          }
        </div>
      </div>
      <div className='Header primary-color'>
        {/* <span className='name'>番茄炒西红柿</span> */}
        <span className='name'>刘广海的个人主页</span>
      </div>
      {
        showLogin && <Login onClick={closeLogin} close={closeLogin}/>
      }
    </div>
  )
}
